<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner {
            width: 400px;
            height: 100px;
            margin: 50px auto;
            position: relative;
            background: #ccc;
            /* overflow: hidden; */
        }

        .imgbox a {
            position: absolute;
            width: 400px;
            height: 100px;
            left: 400px;
            top: 0;
        }

        .imgbox a img {
            width: 400px;
            height: 100px;
        }

        .btns>* {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(200, 200, 200, 0.7);
            text-align: center;
            line-height: 20px;
            top: 40px;
        }

        .btns .left {
            left: 0
        }

        .btns .right {
            right: 0
        }

        .list {
            position: absolute;
            bottom: 0;
            background: rgba(200, 200, 200, 0.7);
            display: flex;
            left: 0;
            right: 0;
            text-align: center;
            line-height: 20px;
            height: 20px;
        }

        .list span {
            flex: 1;
            border-left: solid 1px #fff;
            border-right: solid 1px #fff;
        }

        .list span.active {
            background: red;
            color: #fff
        }
    </style>
</head>

<body>
    <div class="banner"></div>
    <script src="./move.js"></script>
    <script>
        // option 选项
        function Banner(opts = []){
            this.box = opts.box
            this.imgs = opts.imgs
            this.index = opts.index ? opts.index : 0  
            this.btns = opts.btns ? opts.btns : undefined
            this.list = opts.list ? opts.list : undefined
            this.autoplay = opts.autoplay ? opts.autoplay : false
            this.delaytime = opts.delaytime ? opts.delaytime : 2000
            
            this.prev = null
            this.createImgBox()
            if(this.btns == undefined){
                this.createBtns()
                this.addBtnsEvent()
            }
            if(this.list == undefined){
                this.creatList()
                this.addListEvent()
            }
            if(this.autoplay){
                this.play()
            }
        }

        Banner.prototype.play = function(){
            const that = this
            let t = setInterval(()=>{
                that.changeIndex(2)
            },2000)
            this.box.onmouseover = function(){
                clearInterval(t)
            }
            this.box.onmouseout = function(){
                t = setInterval(()=>{
                    that.changeIndex(2)
                },2000)
            }
        }

        Banner.prototype.addListEvent = function(){
            const items = this.listBox.children
            const that = this
            for(let i=0;i<items.length;i++){
                items[i].index = i
                items[i].onclick = function(){
                    if(that.index < this.index){
                        that.move(that.index,this.index,-1)
                    }
                    if(that.index > this.index){
                        that.move(that.index,this.index,1)
                    }
                    that.index = this.index
                }
            }
        }

        Banner.prototype.creatList = function(){
            this.listBox = createEle('list',this.box)
            let str = ''
            this.imgs.forEach((val,index)=>{
                str += `<span>${index}</span>`
            })
            this.listBox.innerHTML = str
            this.listBox.children[this.index].className = 'active'
        }

        Banner.prototype.addBtnsEvent = function(){
            const that = this
            this.left.onclick = function(){
                that.changeIndex(1)
            }
            this.right.onclick = function(){
                that.changeIndex(2)
            }
        }
    
        Banner.prototype.changeIndex = function(d){
            if(d===1){
                if(this.index == 0){
                    this.prev = this.index
                    this.index = 6
                }else{
                    this.prev = this.index
                    this.index --
                }
                this.move(this.prev,this.index,1)//左
            }
            if(d===2){
                if(this.imgbox.children.length - 1 == this.index){
                    this.prev = this.index
                    this.index = 0
                }else{
                    this.prev = this.index
                    this.index ++
                }
                this.move(this.prev,this.index,-1)//右
            }
        }

        Banner.prototype.move = function(prev,now,d){
            const imgs = this.imgbox.children
            imgs[prev].style.left = 0
            move(imgs[prev],{
                left:imgs[0].offsetWidth*d
            })//上一个prev个的img的left为（0 ~ -500）向左移走
            // imgs[now].style.left = imgs[0].offsetWidth+'px'
            imgs[now].style.left = -imgs[0].offsetWidth*d+'px'//这一句很神奇我很难想得到
            move(imgs[now],{
                left:0
            })
            if(this.listBox){
                this.listBox.children[now].className = 'active' 
                this.listBox.children[prev].className = ''
            }
        }

        Banner.prototype.createBtns = function(){
            this.btnsBox = createEle('btns',this.box)
            this.left = createEle('left',this.btnsBox)
            this.right = createEle('right',this.btnsBox)
            this.left.innerHTML = '&lt;'
            this.right.innerHTML = '&gt;'
        }

        Banner.prototype.createImgBox = function(){
            this.imgbox = createEle('imgbox',this.box)
            let str = ''
            this.imgs.forEach(val=>{
                str += `<a href=javascript:void(0)><img src=${val.src} alt=${val.alt} title=${val.title}></a>`
                // <a href=${val.href}>
            })
            this.imgbox.innerHTML = str
            this.imgbox.children[this.index].style.left = 0
        }



        const box = document.querySelector('.banner')
        const imgs = [{
            src: "./imgs/banner1.jpg",
            title: "广告1",
            href: "banner1",
            alt: "这是广告1"
        }, {
            src: "./imgs/banner2.jpg",
            title: "广告2",
            href: "banner2",
            alt: "这是广告2"
        }, {
            src: "./imgs/banner3.jpg",
            title: "广告3",
            href: "banner3",
            alt: "这是广告3"
        }, {
            src: "./imgs/banner4.jpg",
            title: "广告4",
            href: "banner4",
            alt: "这是广告4"
        }, {
            src: "./imgs/banner5.jpg",
            title: "广告5",
            href: "banner5",
            alt: "这是广告5"
        }, {
            src: "./imgs/banner6.jpg",
            title: "广告6",
            href: "banner6",
            alt: "这是广告6"
        }, {
            src: "./imgs/banner7.jpg",
            title: "广告7",
            href: "banner7",
            alt: "这是广告7"

        }]

        function createEle(eleclassName,parent){
            const ele = document.createElement('div')
            ele.className = eleclassName
            parent.appendChild(ele)
            return ele
        }

        // let banner1 = new Banner({
        //     box:box,
        //     imgs:imgs
        // })
        let banner1 = new Banner({
            box,
            imgs,
            index:0,
            // btns:btns,
            // list:list,
            autoplay:true,
            // delaytime:3000
        })

    </script>
</body>

</html>